<template>
  <el-popover v-model="visiblePopObj" placement="top" width="180">
    <div class="fs13 popover-desc-wrap">
      <i class="iconfont iconicon_help warning"></i>
      <p class="text">{{ descText }}</p>
    </div>
    <div class="flex-end">
      <el-button class="" size="mini" type="text" @click="visiblePopObj = false">取消</el-button>
      <el-button class="popover-btn" type="primary" size="mini" @click="submitSure">确定</el-button>
    </div>
    <slot slot="reference"></slot>
  </el-popover>
</template>

<script>

export default {
  name: 'Popover',
  props: {
    visiblePop: {
      type: Boolean,
      default: false
    },
    descText: {
      type: String,
      default: '此操作将删除该数据，是否继续？'
    }
  },
  data() {
    return {
      visiblePopObj: false
    }
  },
  watch: {
    visiblePopObj(newVal, oldVal) {
      this.$emit(`update:visiblePop`, newVal)
    }
  },
  methods: {
    submitSure() {
      this.visiblePopObj = false
      this.$emit('submit')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '~@/assets/styles/variables';
@import '~@/assets/styles/mixin';

.popover-desc-wrap{
  margin-bottom: 9px;
  @include flex(flex-start,flex-start,row);
  .text{
    margin-left: 8px;
  }
}
.popover-btn{
  padding: 5px 10px !important;
}

</style>
